<template>
  <div>
    <div class="card">
      <a-icon class="close" type="close" @click="close" />
      <a-row class="row_space">
        <div class="qj-list-item">
          <div class="name">来源</div>
          <div class="subName">
            {{ msgCardInfo.originCIDName ? msgCardInfo.originCIDName : "-" }}
          </div>
        </div>
        <div class="qj-list-item">
          <div class="name">物料</div>
          <div class="subName">
            {{
              msgCardInfo.SkuName && msgCardInfo.SkuId
                ? `${msgCardInfo.SkuName}(${msgCardInfo.SkuId})`
                : "-"
            }}
          </div>
        </div>
        <div class="qj-list-item">
          <div class="name">拉动条码</div>
          <div class="subName">
            {{ msgCardInfo.BarCodeNumber ? msgCardInfo.BarCodeNumber : "-" }}
          </div>
        </div>
        <!-- <div class="qj-list-item">
          <div class="name">数量</div>
          <div class="subName">
            {{ msgCardInfo.Qty ? msgCardInfo.Qty : "-" }}
          </div>
        </div> -->
      </a-row>
      <a-row class="row_space">
        <div class="qj-list-item">
          <div class="name">目的</div>
          <div class="subName">
            {{ msgCardInfo.CIDName ? msgCardInfo.CIDName : "-" }}
          </div>
        </div>
        <div class="qj-list-item">
          <div class="name">序列号</div>
          <div class="subName">
            {{ msgCardInfo.ProductCode ? msgCardInfo.ProductCode : "-" }}
          </div>
        </div>
        <div class="qj-list-item">
          <div class="name">数量</div>
          <div class="subName">
            {{ msgCardInfo.Qty ? msgCardInfo.Qty : "-" }}
          </div>
        </div>
        <div class="qj-list-item">
          <div class="name">订货号</div>
          <div class="subName">
            {{ msgCardInfo.OrderNumber ? msgCardInfo.OrderNumber : "-" }}
          </div>
        </div>
      </a-row>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  props: {
    msgCardInfo: {
      type: Object,
      default: {},
    },
  },
  methods: {
    close() {
      this.$emit("msgIsShow", false);
    },
  },
};
</script>
<style lang="scss" scoped>
.card {
  position: relative;
  min-width: 24vw;
  border: 1px solid #d0f2e1;
  background: #e8f9f0;
  border-radius: 5px;
  padding: 10px 0;
  // justify-content: space-between;
  .row_space {
    display: flex;
    justify-content: space-between;
  }
}
.qj-list-item {
  .name {
    color: #000;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 2px;
  }
  .subName {
    color: 14px;
  }
}
.close {
  position: absolute;
  top: 5px;
  right: 8px;
  z-index: 1001;
}
</style>